<!--数据回显-->
<!--1.提交数据报错后,将刚才提交的数据回显到表单中-->
<!--2.编辑数据的时候,取消编辑还原旧数据-->

<template>
  <section>

    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="filters">
        <el-form-item>
          <el-input v-model="filters.findname" placeholder="关键字"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="find">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAdd">新增</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onsale">批量上架</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="offsale">批量下架</el-button>
        </el-form-item>
      </el-form>
    </el-col>


    <!--列表-->
    <el-table  :data="pageInfo.rows"  max-height="620" highlight-current-row  @selection-change="selsChange" style="width: 100%;" >
      <!--      选框-->
      <el-table-column type="selection" width="55" fixed>
      </el-table-column>

      <el-table-column type="index" width="60" fixed>
      </el-table-column>

      <!--      列表-->
      <!--      :formatter="formatStatus"-->
      <el-table-column prop="title" label="标题" width="120" sortable fixed>
      </el-table-column>
      <el-table-column prop="cover" label="封面" width="150" sortable >
        <template v-slot="scope">
          <img :src="scope.row.cover" width="100" height="100"/>
        </template>
      </el-table-column>
      <el-table-column prop="saleprice" label="原价" width="100" sortable>
      </el-table-column>
      <el-table-column prop="costprice" label="售价" width="100" sortable>
      </el-table-column>
      <el-table-column prop="isnew" label="是否新车" width="100" sortable>
        <template v-slot="scope">
          <span v-if="scope.row.isnew == 1" style="color: #5e7382">是</span>
          <span v-if="scope.row.isnew == 0" style="color: coral">否</span>
        </template>
      </el-table-column>
      <el-table-column  prop="registertime" label="上牌时间" width="120" sortable>
      </el-table-column>

      <el-table-column prop="mileage" label="里程" width="80" sortable>
      </el-table-column>
      <el-table-column prop="shopname" label="店铺名称" width="180" sortable>
      </el-table-column>
      <el-table-column  prop="onsaletime" label="上架时间" width="100" sortable>
      </el-table-column>
      <el-table-column  prop="offsaletime" label="下架时间" width="100" sortable>
      </el-table-column>

      <el-table-column prop="state" label="状态" width="80" sortable>
        <template slot-scope="scope">
          <span v-if="scope.row.state == 1" style="color: #5e7382">上架</span>
          <span v-if="scope.row.state == 0" style="color: coral">下架</span>
        </template>
      </el-table-column>
      <el-table-column prop="costeffective" label="是否超值" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.costeffective == 1" style="color: #5e7382">是</span>
          <span v-if="scope.row.costeffective == 0" style="color: coral">否</span>
        </template>
      </el-table-column>
      <el-table-column prop="rushsale" label="是否急售" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.rushsale == 1" style="color: #5e7382">是</span>
          <span v-if="scope.row.rushsale == 0" style="color: coral">否</span>
        </template>
      </el-table-column>
      <el-table-column prop="quasinewcar" label="是否准新车" width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.quasinewcar == 1" style="color: #5e7382">是</span>
          <span v-if="scope.row.quasinewcar == 0" style="color: coral">否</span>
        </template>
      </el-table-column>
      <el-table-column prop="transitivecountry" label="是否可迁全国" width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.transitivecountry == 1" style="color: #5e7382">是</span>
          <span v-if="scope.row.transitivecountry == 0" style="color: coral">否</span>
        </template>
      </el-table-column>


      <el-table-column prop="carType.name" label="类型" width="100" sortable>
      </el-table-column>
      <el-table-column prop="seller.username" label="销售顾问" width="100" sortable>
      </el-table-column>
      <el-table-column prop="auditstate" label="审核状态" width="100" sortable>
        <template v-slot="scope">
          <span v-if="scope.row.auditstate == 1" style="color: #5e7382">审核通过</span>
          <span v-if="scope.row.auditstate == 0" style="color: coral">审核驳回</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="300" fixed="right">
        <template v-slot="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
          <el-button type="primary" size="small" @click="handleDel(scope.$index, scope.row)">上传检测报告</el-button>

          <el-button type="warning" size="small" @click="handleResource(scope.$index, scope.row)">资源维护</el-button>
          <el-button  size="small" @click="onsale">上架</el-button>
          <el-button  size="small" @click="offsale">下架</el-button>
        </template>
      </el-table-column>

    </el-table>

    <!--批删和分页-->
    <!--    page-size:每页显示条目个数-->
    <!--    page-sizes:每页显示个数选项器-->
    <!--    :disabled="this.sels.length === 0" 如果没有数据让删除按钮失效 -->
    <el-col :span="24" class="toolbar">
      <el-button type="danger" @click="batchRemoveDept" :disabled="this.sels.length===0">批量删除</el-button>
      <el-pagination
          @size-change="handleSizeChange"
          layout="total, sizes,prev, pager, next,jumper"
          @current-change="handleCurrentChange"

          :page-size="query.pageSize"
          :page-sizes="[25,50,100,200,400,600]"
          :total="pageInfo.total"
          :current-page="query.currentPage"
          style="float:right;">
      </el-pagination>
    </el-col>

    <!--****************************************************************************-->
    <!--*****************************新增和编辑界面***********************************-->
    <!--****************************************************************************-->
    <!--
    :visible.sync  控制dialog是否显示
     :rules  绑定表单校验规则
     prop:绑定校验规则的名称
   -->
    <!--新增界面-->
    <el-dialog title="新增/修改" :visible.sync="carFormVisible" :close-on-click-modal="false">
      <el-form :model="carForm" label-width="80px"  ref="carForm">
        <el-form-item label="标题">
          <el-input v-model="carForm.title" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="封面">
          <el-upload
              class="upload-demo"
              action="http://localhost:8081/fastDfs/upload"
              :on-remove="coverHandleRemove"
              :on-success="coverHandleSuccess"
              :file-list="coverFileList"
              list-type="picture">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="原价">
          <el-input v-model="carForm.saleprice" style="width:220px;" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="售价">
          <el-input v-model="carForm.costprice" style="width:220px;" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="是否新车">
          <el-radio-group v-model="carForm.isnew">
            <el-radio class="radio" :label="1">是</el-radio>
            <el-radio class="radio" :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="上牌时间">
          <el-date-picker
              value-format="yyyy-MM-dd HH:mm:ss"
              v-model="carForm.reigstertime"
              type="datetime"
              placeholder="请选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="里程数">
          <el-input v-model="carForm.mileage" style="width:220px;" type="number" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="超值">
          <el-radio-group v-model="carForm.costeffective">
            <el-radio class="radio" :label="1">是</el-radio>
            <el-radio class="radio" :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="急售">
          <el-radio-group v-model="carForm.rushsale">
            <el-radio class="radio" :label="1">是</el-radio>
            <el-radio class="radio" :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="准新车">
          <el-radio-group v-model="carForm.quasinewcar">
            <el-radio class="radio" :label="1">是</el-radio>
            <el-radio class="radio" :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="可迁全国">
          <el-radio-group v-model="carForm.transitivecountry">
            <el-radio class="radio" :label="1">是</el-radio>
            <el-radio class="radio" :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="车辆类型">
          <el-cascader v-model="carForm.carType"
                       :options="carTypeTree"
                       :props="carOptions"
                        @change="cascaderChange"
                       ref="list"
                       clearable></el-cascader>
        </el-form-item>
        <el-form-item label="基本信息">
<!--          <el-input type="textarea" v-model="carForm.info"></el-input>-->
          <quill-editor v-model="carForm.carDetail.info" :options="quilOption">
          </quill-editor>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="carFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="saveSubmit" :loading="addLoading">提交</el-button>
      </div>
    </el-dialog>
    <!--****************************************************************************-->
    <!--****************************************************************************-->
    <!--****************************************************************************-->

    <!--****************************************************************************-->
    <!--*****************************新增和编辑界面***********************************-->
    <!--****************************************************************************-->

    <el-dialog title="资源维护" :visible.sync="carResourceVisible" :close-on-click-modal="false">
      <el-form :model="carResources" label-width="80px" ref="carResourceForm">
        <el-form-item label="主图">
          <el-upload
              class="upload-demo"
              action="http://localhost:8081/fastDfs/upload"
              :on-remove="imgHandleRemove"
              :on-success="imgHandleSuccess"
              :file-list="imgFileList"
              list-type="picture">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="副图">
          <el-upload
              class="upload-demo"
              action="http://localhost:8081/fastDfs/upload"
              :on-remove="viceimgHandleRemove"
              :on-success="viceimgHandleSuccess"
              :file-list="viceimgFileList"
              list-type="picture">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="更多图片">
          <el-upload
              class="upload-demo"
              action="http://localhost:8081/fastDfs/upload"
              :on-remove="moreimgHandleRemove"
              :on-success="moreimgHandleSuccess"
              :file-list="moreimgFileList"
              list-type="picture">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="carResourceVisible = false">取消</el-button>
        <el-button type="primary" @click.native="saveCarResource" :loading="addLoading">提交</el-button>
      </div>
    </el-dialog>

    <!--****************************************************************************-->
    <!--****************************************************************************-->
    <!--****************************************************************************-->
  </section>
</template>

<script>
import {batchRemoveDep, removeDep, getDepList, addDep, findEmployees, DepTree} from "../../api/api";
import {quillEditor} from "vue-quill-editor";
import quillConfig from "../../common/js/quill-config";
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

export default {
  name: "Department",
  components:{
    quillEditor
  },
  // data为初始化页面值
  data() {
    return {
      /**
       * **************************************************
       * 资源维护
       * **************************************************
       */
      carResourceVisible:false,
      carResources:{
        carId:null,
        list:[]
      },
      imgFileList:[],
      viceimgFileList:[],
      moreimgFileList:[],

      //***************************************************
      //***************************************************
      //***************************************************

      listLoading:false,
      carOptions:{
        //选择时可以选中任一一级
        checkStrictly: true,
        label:'name',
        value:'id'
      },
      quilOption:quillConfig,
      coverFileList:[],
      addLoading:false,
      carTypeTree:[],
      carFormVisible:false,
      carForm: {
        id:null,
        title:"",
        cover:"",
        saleprice:0,
        costprice:0,
        isnew:0,
        registertime:"",
        mileage:null,
        costeffective:0,
        rushsale:0,
        quasinewcar:0,
        transitivecountry:0,
        carType:{
          id:null,
          name:""
        },
        typeId:null,
        carDetail:{
          info:""
        }
      },

      pageInfo: {
        // 总条数
        total: 0,
        rows: []
      },

      //初始化分页
      query: {
        //当前页码
        currentPage: 1,
        //每页显示条数
        pageSize: 25
      },
      /***************************************/

      //高级查询名字
      filters: {
        findname: ''
      },

      sels: [],//列表选中列，批删

      /***************************************************************/
      /******************初始化新增和编辑方法****************************/
      /***************************************************************/
      saveFormVisible: false,//新增界面是否显示
      saveLoading: false,
      options: [],
      title: "新增或修改店铺",
      // 表单校验规则
      //trigger:blur---失去焦点时触发验证
      saveFormRules: {
        name: [
          {required: true, message: '请输入部门名字', trigger: 'blur'}
        ]
      },
//新增界面数据
      saveForm: {
        name: '',
        intro: "",
        manager_id:"",
        state: null,
        parent:{
          id:null,
          name:"",
          length:null
        }
      },
      //下拉员工初始化数据
      employees: [],
      //父级部门树
      deptTree: [],



      //显示编辑界面,需要做数据回显
      //把row行中的数据拷贝到表单中去
      handleEdit(index, row) {
        Object.assign(this.saveForm, row)
        this.saveFormVisible = true;

        //上级部门回显
        this.saveForm.parent = row.parent_id
      },

      /**************************************************************/
      /*****************************删除*********************************/
      /**************************************************************/
      //index:当前数据的行号
      //row:当前行数据
      handleDel(index, row) {
        this.$confirm('确认删除该记录吗?', '提示', {
          type: 'warning'
        }).then(() => {
          this.listLoading = true
          //NProgress.start();
          let para = {id: row.id}
          removeDep(para).then((res) => {
            this.listLoading = false
            //NProgress.done();
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.getDepartment()
          });
        }).catch(() => {

        });
      },


      // **************************************************//
      // *********************批删*************************//
      // **************************************************//


      //批量删除
      batchRemoveDept: function () {
        //箭头函数相当于function函数简写
        //去掉function,改成箭头=>
        //形参小括号写到箭头左边
        var ids = this.sels.map(item => item.id).toString()
        this.$confirm('确认删除选中记录吗？', '提示', {
          type: 'warning'
        }).then(() => {
          this.listLoading = true
          //NProgress.start();
          let para = {ids: ids}

          batchRemoveDep(para).then((res) => {

            this.listLoading = false;
            //NProgress.done();
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.getDepartment()
          });
        }).catch(() => {

        });
      }
      // **************************************************
      // **************************************************
      // **************************************************
    }
  },


  methods: {

    /**
     * **************************************************
     * 资源维护方法
     * **************************************************
     */
    saveCarResource(){
      this.dealCarResourceList();
      this.$confirm('确认提交吗？', '提示', {}).then(() => {
        this.addLoading = true;
        this.$http.put("/carResources/batch",this.carResources)
            .then(result => {
              result = result.data;
              if(result.success){
                // 操作成功:要关闭加载框 刷新当前数据  提示删除成功
                this.addLoading = false;
                // 关闭弹框
                this.carResourceVisible = false;
                this.$message({message: '保存成功!', type: 'success'});
              }else{
                this.$message({message: result.msg, type: 'error'});
              }
            })
      });
    },
    dealCarResourceList(){
      this.carResources.list = [];
      //主图
      if(this.imgFileList && this.imgFileList.length > 0){
        for (let i=0;i<this.imgFileList.length;i++){
          let obj = {resourceUrl:this.imgFileList[i].response.data,type:1}
          this.carResources.list.push(obj);
        }
      }
      //副图
      if(this.viceimgFileList && this.viceimgFileList.length > 0){
        for (let i=0;i<this.viceimgFileList.length;i++){
          let obj = {resourceUrl:this.viceimgFileList[i].response.data,type:2}
          this.carResources.list.push(obj);
        }
      }
      //视频
      if(this.moreimgFileList && this.moreimgFileList.length > 0){
        for (let i=0;i<this.moreimgFileList.length;i++){
          let obj = {resourceUrl:this.moreimgFileList[i].response.data,type:3}
          this.carResources.list.push(obj);
        }
      }
    },
    handleResource(index,row){
      // 给文件数组赋空值,防止将上一次的内容带到这一次
      this.imgFileList = [];
      this.viceimgFileList = [];
      this.moreimgFileList = [];
      // 展示弹框
      this.carResourceVisible = true;
      this.carResources.carId = row.id;
      // 根据车辆的ID查询该车辆的资源信息,如果有就要回显
      this.getCarResourcesByCarId(row.id);
    },
    getCarResourcesByCarId(carId){
      this.$http.get("/carResources/carid/"+carId)
          .then(result => {
            result = result.data;
            if(result.success){
              for(var i=0;i<result.data.length;i++){
                var obj = result.data[i];
                var imgurl = obj.resourceUrl;
                var name = imgurl.substring(imgurl.lastIndexOf("/")+1);
                /**
                 * type
                 * 1主图 2副图 3视频
                 */
                if(obj.type == 1){
                  this.imgFileList.push({name:name,url:imgurl,response:{data:imgurl}})
                }
                if(obj.type == 2){
                  this.viceimgFileList.push({name:name,url:imgurl,response:{data:imgurl}})
                }
                if(obj.type == 3){
                  this.moreimgFileList.push({name:name,url:imgurl,response:{data:imgurl}})
                }
              }
            }
          })
    },

    // 主图
    imgHandleRemove(file, fileList){
      // var filePath = file.response ? file.response.resultObj : file.url;
      var filePath = file.response.data
      this.$http.delete("/fastDfs/delete?path="+filePath)
          .then(result => {
            result = result.data;
            if(result.success){
              this.$message({message: '删除成功!', type: 'success'});
              this.imgFileList = fileList;
            }else{
              this.$message({message: result.msg, type: 'error'});
            }
          })
    },
    imgHandleSuccess(response, file, fileList){
      this.imgFileList = fileList;
    },

    viceimgHandleRemove(file, fileList){
      var filePath = file.response.data;
      this.$http.delete("/fastDfs/delete?path="+filePath)
          .then(result => {
            result = result.data;
            if(result.success){
              this.$message({message: '删除成功!', type: 'success'});
              this.viceimgFileList = fileList;
            }else{
              this.$message({message: result.msg, type: 'error'});
            }
          })
    },
    viceimgHandleSuccess(response, file, fileList){
      this.viceimgFileList = fileList;
    },

    moreimgHandleRemove(file, fileList){
      var filePath = file.response.data;
      this.$http.delete("/fastDfs/delete?path="+filePath)
          .then(result => {
            result = result.data;
            console.log(result)
            if(result.success){
              this.$message({message: '删除成功!', type: 'success'});
              this.moreimgFileList = fileList;
            }else{
              this.$message({message: result.msg, type: 'error'});
            }
          })
    },
    moreimgHandleSuccess(response, file, fileList){
      this.moreimgFileList = fileList;
    },

     //******************************************************
     //****************************************************

    //显示新增界面同时查询车辆类型树,渲染级联菜单
    handleAdd() {
      this.carForm={
        id:null,
            title:"",
            cover:"",
            saleprice:0,
            costprice:0,
            isnew:0,
            registertime:"",
            mileage:null,
            costeffective:0,
            rushsale:0,
            quasinewcar:0,
            transitivecountry:0,
            carType:{
          id:null,
              name:""
        },
        typeId:null,
            carDetail:{
          info:""
        }
      },
      this.carFormVisible = true;
      this.$http.get("/carType/tree").then((res) => {
        res = res.data;
        if(res.success){
          this.carTypeTree = res.data
        }
      })
    },

    //列表更改
    selsChange: function (sels) {
      this.sels = sels
    },


    //提交弹出框
    //$refs代表所有ref:取了别名的
    saveSubmit() {
      this.$refs.carForm.validate((valid) => {
        if (valid) {
          this.$confirm('确定提交么?', '提示', {}).then(() => {
            //防止用户多次点击
            this.addLoading = true
            /**
             * 因为车辆类型是个级联下拉框,是个数组,但是后台的carType是个对象
             * 有两种方式
             * 1.将carType数组转换为对象
             * 2.将carType的值赋值给typeId,将carType设置为null
             */
            let carType = this.carForm.carType
            //令this.carForm.typeId等于carType数组中最后一个值
            if(carType){
              this.carForm.typeId = carType[carType.length-1]
              this.carForm.carType = null
            }
            this.$http.put("/car",this.carForm).then((res) => {
              if (res.data.success) {
                this.$message({
                  message: '新增成功',
                  type: 'success'
                })
              } else {
                this.$message.error(res.data.message)
              }
              this.getCars()
              this.addLoading = false
              this.carFormVisible = false
            })
          })
        }
      })
    },


    find() {
      this.query.currentPage = 1
      this.getCars()
    },

    //js方法
    //账号状态转换
    // formatStatus: function (row, column) {
    // 	return row.state == 1 ? '正常' : row.state == 0 ? '停用' : '未知';
    // },

    //当前页码改变时触发
    handleCurrentChange(currentPage) {
      this.query.currentPage = currentPage
      this.getCars()
    },

    //页码大小改变时触发(success)
    handleSizeChange(pageSize) {
      this.query.pageSize = pageSize
      this.getCars()
    },

    //获取部门列表
    getCars() {
      this.listLoading = true
      //封装数据
      let query = {
        //this调用的是data里面的初始化数据
        currentPage: this.query.currentPage,
        pageSize: this.query.pageSize,
        keyword: this.filters.findname
      }
      // this.$http.post("/dept",query)
      this.$http.post("/car",query).then(res => {

        res = res.data.data
        this.pageInfo.rows = res.data

        // 总数
        this.pageInfo.total = res.count
        //关闭加载
        this.listLoading = false
      }).catch(result => {
        this.$message({message: '分页查询失败', type: 'error'});
      })
    },

    //车辆图片上传回调
    coverHandleSuccess(response, file, fileList){
      this.carForm.cover = response.data;
    },
    //新增车辆图片删除
    //文件删除
    coverHandleRemove(file, fileList) {
      var filePath = file.response.data
      this.$http.delete("/fastDfs/delete?path="+filePath)
          .then(res=>{
            if(res.data.success){
              this.$message({
                message: '删除成功!',
                type: 'success'
              });
              this.shop.logo=""
            }else{
              this.$message({
                message: '删除失败!',
                type: 'error'
              });
            }
          })
    },

    /**
     * vue解决Element-ui中 el-cascader 级联选择器 最后一级数据为空显示暂无数据问题
     */
    getTreeData (datas) {
      // console.log(datas)
      let data = []
      datas.map((item) => {
        if (item.children && item.children.length > 0) {
          let dadax = {
            name: item.name, // 这是需要展示的数据 我的数据是name，所以label对应的是name
            id: item.id,
            children: this.getTreeData(item.children)
          }
          data.push(dadax)
        } else {
          let dadax = {
            name: item.name,
            id: item.id
          }
          data.push(dadax)
        }
        return data
      })
      return data
    },
    cascaderChange (v) {
      let nodesObj = this.$refs['list'].getCheckedNodes()[0]
      this.dataForm.caseType = nodesObj.data.id
      // 选择最后一级后收起选择框
      !nodesObj.hasChildren && this.$refs['list'].toggleDropDownVisible()
    },
    init () {
      this.$nextTick(() => {
        this.$http.get('').then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.caseTypeList = this.getTreeData(res.data)
        })
      })
    },
    /**
     * ************************************************************************
     */

    /**
     * ***************************车辆上下架******************************************
     */
    onsale(){
      // 获取当前被选中数据的id数组
      var ids = this.sels.map(item => item.id);
      //获取选中所有行
      if(!this.sels || this.sels.length  <1){
        this.$message({ message: '需要选中数据才能上架',type: 'error'});
        return;
      }
      this.$confirm('确认上架选中记录吗？', '提示', {
        type: 'warning'
      }).then(() => {
        this.listLoading = true;
        this.$http.post('/car/onsale',ids).then((res) => {
          this.listLoading = false;

          if(res.data.success){
            this.$message({
              message: res.data.msg,
              type: 'success'
            });
          }else{
            this.$message({
              message: res.data.msg,
              type: 'error'
            });
          }
          this.getCars();
        });
      }).catch(() => {

      });
    },
    offsale(){
      var ids = this.sels.map(item => item.id);
      //获取选中所有行
      if(!this.sels || this.sels.length  <1){
        this.$message({ message: '需要选中数据才能下架',type: 'error'});
        return;
      }
      this.$confirm('确认下架选中记录吗？', '提示', {
        type: 'warning'
      }).then(() => {
        this.listLoading = true;
        this.$http.post('/car/offsale',ids).then((res) => {
          this.listLoading = false;

          if(res.data.success){
            this.$message({
              message: '下架成功',
              type: 'success'
            });
          }else{
            this.$message({
              message: res.data.msg,
              type: 'error'
            });
          }
          this.getCars();
        });
      }).catch(() => {

      });
    },
    //*****************************************************************************


  },

  mounted() {
    this.getCars()
  }
}
</script>

<style scoped>

</style>